<!-- 火情详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">火情详情</block>
		</cu-custom>
		<view class="content" style="background-color: #fff;">
			<ul>
				<li>
					<text class="list-info">上报人：</text>
					<text class="list-title">{{ sbr || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">联系方式：</text>
					<text class="list-title">{{ tel || '暂无' }}</text>
				</li>
				<li>
					<view class="list-box" style="padding: 0;font-size: 12px;line-height: 94rpx;">
						<p class="list-info" style="line-height: 94rpx;">火情名称：</p>
						<p class="list-title">{{ name || '暂无' }}</p>
					</view>

				</li>
				<li>
					<text class="list-info">所属企业：</text>
					<text class="list-title">{{ enterprise || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">详细地址：</text>
					<text class="list-title">{{ address || '暂无' }}</text>
				</li>
				<li>
					<text class="list-info">火情确认时间：</text>
					<text class="list-title">{{ time || '暂无' }}</text>
				</li>
			</ul>
		</view>

		<map class="my-map" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>

		<scroll-view scroll-x class=" nav">
			<view class="flex text-center my-nav">
				<view class="cu-item flex-sub" :class="index == TabCur ? 'text-orange cur' : 'text-black'"
					v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</view>
			<view class="bg-white">
				<view style="color: red;text-align: center;" v-if="ulist.length == 0">暂无数据</view>
				<view class="fk_content" v-for="(item, index) in ulist" :key="index">
					<text>姓名：{{ item.userName || '暂无' }}</text>
					<text>电话：{{ item.phone || '暂无' }}</text>
					<text>状态：{{ tabs[TabCur || '暂无'] }}</text>
					<text @click="call(item.phone)">点击拨打电话</text>
				</view>
			</view>
		</scroll-view>
		<view class="flex btns-group bg-gray" v-if="fireExecutionStatus !== ''">
			<!-- <button class="my-btn-grpup" v-if="fireExecutionStatus!=2">视频通话</button> -->
			<button class="my-btn-grpup" @tap="showModal">火情视频</button>
			<button class="my-btn-grpup" @click="jshq" v-if="fireExecutionStatus != 2">结束火情</button>
		</view>

		<view class="cu-modal" v-show="video_show" :class="video_show ? 'show' : ''">
			<view class="cu-dialog">
				<view class="bg-img" style="background-color: #C7C7C7;">

					<view class="cu-bar   text-white">
						<text style="margin-left: 20rpx;">视频监控</text>
						<view style="margin-right: 20rpx;" @tap="hideModal">
							<text style="" class="cuIcon-close "></text>
						</view>
					</view>
					<view style="background-color: #FFFFFF;height: 100%">
						<video style="margin: 20px 0;" :src="video_url" enable-danmu danmu-btn controls></video>
					</view>
				</view>
			</view>
		</view>
		<message />
	</view>
</template>

<script>
export default {
	data() {
		return {
			sbr: '',
			tel: '',
			name: '',
			enterprise: '',
			address: '',
			time: '',

			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [],
			TabCur: 0,
			scrollLeft: 0,
			tabs: ['已反馈', '未反馈'],
			fk_name: '',
			fk_tel: '',
			fk_status: '',
			modalName: null,
			video_url: '',
			video_show: false,
			ucId: '',
			ulist: [],
			fireExecutionStatus: '' //火情状态
		}
	},
	methods: {
		call(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		},
		showModal(e) {
			this.video_show = true
		},
		hideModal(e) {
			this.video_show = false
		},
		jshq() {
			let that = this
			// 封装参数
			let params = {
				"ucId": that.ucId,
			}

			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/firemanage/generateFireFinishPutFire',
				data: {
					...params
				}
			}).then(function (res) {
				let data = res.data.code
				if (data == 0) {
					uni.showToast({
						title: "结束获取成功"
					})
					uni.navigateBack({
						delta: 2
					});
				}
			}).catch(function (e) {

			})
		},
		// 火情通知人
		fk() {
			let that = this
			// 封装参数
			let params = {
				"fireId": that.ucId,
				"status": that.TabCur
			}

			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/fireInfo/getFireNoticeUserList',
				data: {
					...params
				}
			}).then(function (res) {
				that.ulist = res.data.data
			}).catch(function (e) {

			})
		},
		xq() {
			// 封装参数
			let that = this
			let params = {
				"ucId": that.ucId
			}

			// 请求数据
			let app = getApp()
			app.globalData.request({
				url: 'wx/fireInfo/getFireInfo',
				data: {
					...params
				}
			}).then(function (res) {
				console.info(res)
				that.sbr = res.data.data.userName
				that.tel = res.data.data.userPhone
				that.name = res.data.data.name
				that.enterprise = res.data.data.enterpriseName
				that.address = res.data.data.loaction
				that.time = res.data.data.fireConfirmTime
				that.latitude = res.data.data.userLatitude
				that.longitude = res.data.data.userLongitude
				that.covers = [{
					id: Math.ceil(Math.random() * 100),
					width: 32,
					height: 32,
					latitude: that.latitude,
					longitude: that.longitude,
					iconPath: '',
					label: {
						content: '第一报警人' + res.data.data.userName,
						borderColor: '#D90000',
						color: '#D90000',
						borderWidth: 1,
						borderRadius: 2,
						padding: 2
					}
				}]
				that.fk_name = res.data.data.userName
				that.fk_tel = res.data.data.userPhone
				that.video_url = res.data.data.fireVodie
				that.fireExecutionStatus = res.data.data.fireExecutionStatus
			}).catch(function (e) {

			})
		},
		submit() {
			if (this.submitId == "" || this.address == "") {
				uni.showToast({
					title: "数据不完整"
				})
				return;
			}
			let params = {
				"location": this.address,
				"ucId": this.submitId
			}
			// 生成报警信息
			let app = getApp()
			app.globalData.request({
				url: '/wx/firealarm/confirmFire',
				data: {
					...params
				}
			}).then(function (res) {
				let data = res.data.code
				if (data == 0) {
					uni.showToast({
						title: "报警成功"
					})
					uni.navigateBack({
						delta: 2
					});
				}

			}).catch(function (e) { })
		},
	},
	onLoad(option) {
		this.ucId = option.ucId
		this.xq()
	}
}
</script>

<style scoped>
.my-map {
	width: 100%;
	margin-top: 20rpx;
}

.my-nav {
	background: #f5f6f8;
}

.text-black {
	color: #777777;
}

.fk_content {
	padding-top: 32rpx;
	display: flex;
	flex-direction: column;
	font-size: 24rpx;
	color: #777777;
	line-height: 50rpx;
	margin-left: 76rpx;
}

.fk_content text:last-child {
	color: #0081FF;
}
</style>
